<template>
    <div class="codeKey">
        <div class="list" :style="{width : (30 * keys.length) + 'px'}">
            <div class="item"
            @mousedown="mousedown"
            @click="(e) => chek(e, item)"
            v-for="(item, index) in keys" :key="index">{{ item }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props : {
        keys : {
            type : Array,
            default : []
        }
    },
    methods : {
        mousedown(e){
            e.preventDefault()
        },
        chek(obj, str){
            if(document.selection) {
                var sel = document.selection.createRange();
                sel.text = str;
            } else if(typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
                var startPos = obj.selectionStart,
                    endPos = obj.selectionEnd,
                    cursorPos = startPos,
                    tmpStr = obj.value;
                obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
                cursorPos += str.length;
                obj.selectionStart = obj.selectionEnd = cursorPos;
            } else {
                obj.value += str;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.codeKey{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #fff;
    z-index: 999;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0 5px;
    .list{
        height: 100%;
        outline: none;
        display: flex;
        .item{
            width: 30px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>